<template>
  <div class="commonFooter">

    <div class="item" @click="clickItem('/')"  :class="{active: $route.path==='/'}">
      <img v-if="$route.path==='/'" src="../../assets/tabbar/xinwen.png" alt="">
      <img v-else src="../../assets/tabbar/xinwen-copy.png" alt="">
      <p>{{$t('footer.home')}}</p>
    </div>
    <div class="item" @click="clickItem('/market')"  :class="{active: $route.path==='/market'}">
      <img  v-if="$route.path==='/market'" src="../../assets/tabbar/hangqing-copy.png" alt="">
      <img v-else src="../../assets/tabbar/hangqing.png" alt="">
      <p>{{$t('footer.quotation')}}</p>
    </div>
    <div class="item" @click="clickItem('/klinepage')" :class="{active: $route.path==='/klinepage'}">
      <img  v-if="$route.path==='/klinepage'"  src="../../assets/tabbar/icstock-copy.png" alt="">
      <img v-else src="../../assets/tabbar/icstock.png" alt="">
      <p>{{$t('footer.kLine')}}</p>
    </div>
    <div class="item" @click="clickItem('/transaction')" :class="{active: $route.path==='/transaction'}">
      <img  v-if="$route.path==='/transaction'" src="../../assets/tabbar/jiaoyi-copy.png" alt="">
      <img v-else src="../../assets/tabbar/jiaoyi.png" alt="">
      <p>{{$t('footer.trans')}}</p>
    </div>
    <!-- <div class="item" @click="clickItem('/gonggao')" :class="{active: $route.path==='/gonggao'}">
      <i class="iconfont icon-Document"></i>
      <p>{{$t('footer.notification')}}</p>
    </div> -->
    <div class="item" @click="clickItem('/my')" :class="{active: $route.path==='/my'}">
      <img  v-if="$route.path==='/my'" src="../../assets/tabbar/wode-copy.png" alt="">
      <img v-else src="../../assets/tabbar/wode.png" alt="">
      <p>{{$t('footer.mine')}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "commonFooter",
    props: {
      active: {
        type: String,
        default: 'index'
      }
    },
    methods:{
      clickItem:function(path){
          this.$router.push(path);
      }
    }

  }

</script>

<style scoped>
/*  @import "../../static/iconfont/iconfont.css"; */
  .commonFooter{
    position: fixed;
    bottom: 0px;
    border-top:1px solid #d2d2d2;
    background-color: #242D36;
    width: 100%;
    height: 8%;
  }
  .item{
    padding: 0;
    margin: 3% 0 0 0;
    height: 100%;
    width:20%;
    float:left;
    text-align:center;
    color: #888A87;
  }
  .item i{
    font-size: 1.5em;
  }
  .item img{
    width:.5rem;
    height:.5rem;
  }
  .active{
    color: #d36d17;
  }
  .active p{
    color: #d36d17;
  }
</style>
